Cycle2

Download Demos API FAQ

Overview

Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

Highlights:

How it Works

It's very simple really, even your grandmother could use it. It goes like this:

Need more details? Ok, here's the deal: Cycle2 provides a plugin function called cycle. That function is invoked on a container element. Each image in the container becomes a "slide". Options control how and when the slides are transitioned. But here's the thing... you don't have to call cycle and pass your options. You declare your options as attributes on the slideshow element and Cycle2 grabs them from there.

What's that you say? You'd rather set your options via script than in the markup? Ok fine, have it your way. You don't have to declare your options in the markup (but it's fun!), you can invoke cycle from your own code and pass your options in the old-fashioned way. You can even grab hold of the API object and inject your own implementation of any of the API methods that you choose.

Responsive

Use media queries... don't use media queries... whatever. Cycle2 doesn't care; it's the honeybadger of slideshows plugins. Most of the demos on this site use fluid slideshow designs where the slideshow size adjusts as the window is resized. This is accompolished by a simple style rule like this: .cycle-slideshow { width: 45% }. Your slideshows can be fixed-width or fluid-width, or they can adapt to media query breakpoints. You decide.

Donations

Donations are a great way to say "Thank you, malsup". I know you want to, so don't be shy. All donations are greatly appreciated and help fund future development.

Go ahead, click the button!